<template>
  <div>
    <el-card style="margin-left:15px;margin-bottom: 15px;margin-right: 10px ">
      <el-breadcrumb
        separator-class="el-icon-arrow-left"
        style="margin-right: 30px;position:absolute;right:0;ub:main-center cross-center"
      >
        <el-breadcrumb-item :to="{ path: '/' }">回执录入</el-breadcrumb-item>
        <el-breadcrumb-item>配送管理</el-breadcrumb-item>

        <el-breadcrumb-item>调度中心</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 搜索框-->
      <div style="margin-top: 15px;margin-left: 15px;height: 40px;width:550px" >
        <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
          <el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 150px">
            <el-option label="任务单id" value="任务单id"></el-option>
            <el-option label="任务单状态" value="任务单状态"></el-option>

            <!--           <el-option label="订购货物信息" value="2"></el-option>-->
            <!--           <el-option label="收购客户信息" value="3"></el-option>-->
            <!--           <el-option label="订购客户信息" value="4"></el-option>-->
            <!--           <el-option label="备注信息" value="6"></el-option>-->
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="query_Click"></el-button>
        </el-input>
      </div>

      <!--数据表-->
      <div style="margin-top: 15px;margin-left: 15px;margin-right: 20px;width:100%;">
        <template>
          <el-table
            :data="tableData.slice((pageInfo.curPage-1)*pageInfo.pageSize,
        pageInfo.curPage*pageInfo.pageSize)"
            style="width: 100%"
            height="450">
            <el-table-column
              fixed
              prop="id"
              label="任务单id"
              width="92px">
            </el-table-column>

            <el-table-column
              prop="orderStatus"
              label="订单状态"
              width="92px">
              <template slot-scope="scope">
                <span v-if="scope.row.orderStatus===0">可分配</span>
                <span v-if="scope.row.orderStatus===1">缺货</span>
                <span v-if="scope.row.orderStatus===2">调度中</span>
                <span v-if="scope.row.orderStatus===3">已领货</span>
                <span v-if="scope.row.orderStatus===4">配送完成</span>
                <span v-if="scope.row.orderStatus===5">已退货</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="userId"
              label="配送员"
              width="92px">
            </el-table-column>
            <el-table-column
              prop="serviceMoney"
              label="服务费"
              width="92px">
            </el-table-column>
            <el-table-column
              prop="clientId"
              label="客户id"
              width="92px">
            </el-table-column>

            <el-table-column
              prop="customerSatisfaction"
              label="客户满意度"
              width="92px">
            </el-table-column>

            <el-table-column
              prop="taskType"
              label="任务类型"
              width="92px">
              <template slot-scope="scope">
                <span v-if="scope.row.taskType===0">普通配送订单</span>
                <span v-if="scope.row.taskType===1">退订单</span>
                <span v-if="scope.row.taskType===2">换货单</span>
                <span v-if="scope.row.taskType===3">退货单</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="taskStatus"
              label="任务状态"
              width="92px">
              <template slot-scope="scope">
                <span v-if="scope.row.taskStatus===-1">配送员分配中</span>
                <span v-if="scope.row.taskStatus===0">已领货</span>
                <span v-if="scope.row.taskStatus===5">正常</span>
                <span v-if="scope.row.taskStatus===1">部分完成</span>
                <span v-if="scope.row.taskStatus===2">完成</span>
                <span v-if="scope.row.taskStatus===3">失败</span>
                <span v-if="scope.row.taskStatus===4">已退货</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="clientFeedback"
              label="客户反馈"
              width="92px">
            </el-table-column>

            <el-table-column
              prop="servicetimeInformation"
              label="服务时间信息"
              width="92px">
            </el-table-column>

            <el-table-column
              prop="remark"
              label="备注信息"
              width="92px">
            </el-table-column>

            <el-table-column
              prop="createTime"
              label="创建时间"
              width="92px">
            </el-table-column>

            <el-table-column
              prop="updateTime"
              label="更新时间"
              width="92px">
            </el-table-column>

            <el-table-column
              prop="orderId"
              label="订单id"
              width="92px">
            </el-table-column>



            <el-table-column
              fixed="right"
              label="操作"
              width="130px">
              <template slot-scope="scope">
                <el-button type="primary" round @click="receiptEntry(scope.row)" :disabled="scope.row.orderStatus!==3">回执录入</el-button>
              </template>
            </el-table-column>

          </el-table>
        </template>
      </div>

      <!--     分页-->
      <div class="block" style="margin-top: 10px;margin-left: 15px;">
        <!--    <span class="demonstration">完整功能</span>-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.curPage"
          :page-sizes="[4,8,10,20]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        >
        </el-pagination>
      </div>
      <!--    要求：①录入回执信息。②修改订单与任务单状态为配送完成-->
<!--      对话框-->
      <div>
        <el-dialog title="回执录入" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="订单id：" :label-width='formLabelWidth'>
<!--              {{form.d}}-->
              {{form.id}}
            </el-form-item>
            <el-form-item label="任务状态：" :label-width='formLabelWidth'>
              <el-radio-group v-model="form.orderStatus">
                <el-radio label="完成"></el-radio>
                <el-radio label="部分完成"></el-radio>
                <el-radio label="失败"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="客户满意度：" :label-width="formLabelWidth">
              <el-input v-model="form.satisfaction" autocomplete="off" type="textarea"></el-input>
            </el-form-item>
            <el-form-item label="备注：" :label-width="formLabelWidth">
               <el-input v-model="form.remark" autocomplete="off" type="textarea"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click=receiptMake()>确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-card>

  </div>

</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        pageInfo: {
          curPage: 1,
          pageSize: 4,
        },
        total: 0,
        input: '',
        select: '',
        dialogFormVisible: false,
        form: {
          //任务状态（完成，部分完成，失败）、客户满意度、备注
          id:'1' ,//任务单id
          orderStatus:'',//任务状态
          satisfaction:'',//客户满意度
          remark:'',//备注
        },
        formLabelWidth: '120px',
        judge_orderStatus:'',
        judge_orderId:''
      }
    },
    methods:{
      //获取数据
      async getMessage()
      {
        console.log('获得任务单数据：')
        let url='/api/dispatching_management/query_all_missionList'
        const {data:res}=await this.$http.get(url).catch(err=>{
          console.log(err.msg)
          this.$message.error('服务器没有权限，请多试几遍！')
        })
        if (res.code==200)
        {
          // this.$message.success(res.msg)
          console.log(res.msg)
          this.tableData=res.data
          this.total=res.data.length
        }
        else if (res.code!=200)
        {
          this.$message.error(res.error())
        }
      },

      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageInfo.pageSize=val
      },
      handleCurrentChange(val) {
        this.pageInfo.curPage=val
        console.log(`当前页: ${val}`);
      },

      async query_Click() {
        console.log('查询');
        console.log('this.input:'+this.input);
        console.log('this.select:'+this.select);
        if(this.input=='')
        {
          return this.$message.error('请输入相关查询数据内容')
        }
        if(this.select=='')
        {
          return this.$message.error('请选择查询类型')
        }
        else if((this.select!==''||this.select!==null)&&(this.input!==''||this.input!==null))
        {
          switch (this.select)
          {
            case "任务单id":
              //执行查询id的代码块
              this.query_orderId()
              break;
            case "任务单状态":
              this.query_orderType()
              break;
            // case "订单状态":
            //   this.query_orderType()
            //   break;
            // case "客户姓名":
            //   this.query_orderType()
            //   break;
            // case "联系电话":
            //   this.query_orderType()
            //   break;
            default:
              break;

          }
        }

      },
      //根据id查询
      async query_orderId(){
        // let url="/api/dispatching_management/queryDispat_by_id/"
        let url='/api/dispatching_management/query_mission_by_id/'
        console.log('根据id查询');
        const{data:res}=await this.$http.get(`${url}/${this.input}`).catch(err=>{
          this.$message.error('对不起，服务器异常或没有权限！请多试几次')
          console.log(err.message)
        })
        if(res.code==200)
        {
          // this.$message.success(res.msg)
          console.log(res.msg)
          console.log(res.data)
          this.tableData=res.data
        }
        else if(res.code!==200)
        {
          this.$message.error(res.msg)
        }
      },
      //根据任务单类型()
      async query_orderType()
      {
        console.log('任务单类型：')
        let url='/api/dispatching_management/query_missionList/'
        const {data:res}=await this.$http.get(`${url}${this.input}`).catch(err=>{
          console.log(err.msg)
          this.$message.error('对不起，服务器异常或没有权限！请多试几次')
        })
        if(res.code==200)
        {
          this.$message.success(res.msg)
          this.tableData=res.data
        }
        else if (res.code!=200)
        {
          this.$message.error(res.msg)
        }
      },
      //获取订单状态
      async get_orderStatus(orderId)
        {
          console.log(orderId)
          //根据订单id查询到订单status
          let url_queryStatus='/api/dispatching_management/query_order_by_id/'
          const {data:res}=await this.$http.get(`${url_queryStatus}${orderId}`)
          if(res.code==200)
          {
            console.log(res.data)
            console.log(res.data.orderStatus);
            this.judge_orderStatus=res.data.orderStatus
          }
          else if (res.code!==200)
          {
            console.log('获取订单状态失败');
          }
      },
      //打开回执录入的对话框
      receiptEntry(row)
      {
        //首先进行一波状态的判断：
        console.log('首先进行一波状态的判断')

        console.log(row.orderId)

        this.judge_orderId=row.orderId

        this.get_orderStatus(row.orderId)
        //已领货
        console.log('判断状态：')

        console.log(this.judge_orderStatus)
        //状态为3，则为已领货，之后要更新状态为4->配送完成
        this.judge_orderStatus=3
        if (this.judge_orderStatus==3)
        {
          //进行回执录入
          console.log(this.judge_orderStatus)
          this.dialogFormVisible=true
          this.form.id=row.id
          // this.receiptMake(row.id)
          // console.log('点击的订单：');
          // console.log(row);
          // this.form.id=row.id;
          // console.log('获取到id')
          console.log(row.id);
        }
        else if (this.judge_orderStatus!==3)
        {
          this.$message.error('该订单状态不符合回执录入的操作，请检查订单状态！！')
        }
      },
      //确定回执录入
      async receiptMake()
      {
        console.log('回执录入');
        let url='/api/dispatching_management/add_receipt/'
        //在这里把利用接口把数据传回去，之后数据表更新
      // else if((this.select!==''||this.select!==null)&&(this.input!==''||this.input!==null))
        if ((this.form.orderStatus==''||this.form.satisfaction==null)&&(this.form.remark==''))
        {
          return this.$message.error('请输入完善相关数据')
        }
        else
        {
          ///api/dispatching_management/add_receipt/{id}/{status}/{satifaction}/{remark}
          //把数据回传
          const{data:res}=await this.$http.get(`${url}${this.form.id}/${this.form.orderStatus}/${this.form.satisfaction}/${this.form.remark}`
          ).catch(err=>{
            console.log(err)
            this.$message.error(res.msg)})

          console.log(this.form.orderStatus)
          console.log(this.form.satisfaction)
          console.log(this.form.remark)

          if (res.code==200)
          {
            console.log(res.msg)
            //录入成功之后，
            //更新订单状态
            this.updateOrder(this.judge_orderId,4)
            //重新更新数据
            this.getMessage()
          }
          else if (res.code!=200)
          {
            console.log(res.msg)
          }

          this.dialogFormVisible=false
        }
      },
      async updateOrder(orderId,orderStatus)
      {
        let url = '/api/dispatching_management/updateOrder/'
        const {data:res}=await this.$http.get(`${url}${orderId}/${orderStatus}`).catch(
          err=>{
            this.$message.error('数据更新失败，服务器更新失败')
            console.log(err.msg)
          }
        )
        if (res.code==200)
        {
          console.log('数据更新成功')
          // this.$message.success(res.msg)
          console.log(res.msg)
        }
        else if (res.code!==200)
        {
          console.log('数据更新失败')
          this.$message.error(res.msg)
        }
      }

    },
    created() {
      this.getMessage()
    }

  };
</script>

<style scoped>
  .el-select .el-input {
    width: 80px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
